<template>
  <div class="wrapper">
  	<div class="icon" v-for="item of iconList" :key="item.id">
  		<div class="icon-img">
  			<img class="img" :src="item.imgUrl" :class="[item.background]">
  		</div>
  		<div class="icon-desc">{{item.desc}}</div>
  	</div>
  </div>
</template>

<script>
export default {
  name: 'homeCatelog',
  props:{
    iconList:Array
  },
  data(){
  	return{
  		//绑定类名
  		red:'red',
  		orange:'orange',
  		green:'green',
  		blue:'blue',
  		// iconList:[
  		// 	{
  		// 		id:'0001',
  		// 		imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
  		// 		desc:'本地热推',
  		// 		background:'green'
  		// 	},
  		// 	{
  		// 		id:'0002',
  		// 		imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
  		// 		desc:'亲子游',
  		// 		background:'orange'
  		// 	},
  		// 	{
  		// 		id:'0003',
  		// 		imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
  		// 		desc:'温泉热卖',
  		// 		background:'blue'
  		// 	},
  		// 	{
  		// 		id:'0004',
  		// 		imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
  		// 		desc:'主题乐园',
  		// 		background:'red'
  		// 	}
  		// ]
  	}
  }
  
}
</script>


<style lang="stylus" scoped>
.wrapper
	background:#fff
	padding-top:.2rem
	.icon
		width:25%
		float:left
		.img
			display:block
			background:red
			border-radius:1rem
			margin:0 auto
			width:50%
		.red
			background:#fd6266
		.green
			background:#fda424
		.orange
			background:#6dcf16
		.blue
			background:#41a9f2
		.icon-desc
			text-align:center
			padding:.2rem 0

</style>
